<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>个人资料--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form layui-row">
	<div class="layui-col-md3 layui-col-xs12 user_right">
		<div class="layui-upload-list">
			<input type="hidden" name="goodsimg" id="goodsimg" value="images/defaultgoodsimg.png">
			<img class="layui-upload-img layui-circle userFaceBtn thumbImg " id="userFace">
		</div>
		<button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i>换一个头像了</button>
		<p>由于是纯静态页面，所以只能显示一张随机的图片</p>
	</div>
	<div class="layui-col-md6 layui-col-xs12">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" id="username" name="username" th:value="${session.user.name}" disabled class="layui-input layui-disabled">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">部门</label>
			<div class="layui-input-block">
				<input type="text" value="" disabled class="layui-input layui-disabled">
			</div>
		</div>

		<div class="layui-form-item" pane="">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block userSex">
				<input type="radio" name="sex" value="男" title="男" checked="">
				<input type="radio" name="sex" value="女" title="女">
				<input type="radio" name="sex" value="保密" title="保密">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="tel" value="" placeholder="请输入手机号码" lay-verify="phone" class="layui-input userPhone">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出生年月</label>
			<div class="layui-input-block">
				<input type="text" value="" placeholder="请输入出生年月" lay-verify="userBirthday" readonly class="layui-input userBirthday">
			</div>
		</div>
		<div class="layui-form-item userAddress">
			<label class="layui-form-label">家庭住址</label>
			<div class="layui-input-inline">
				<select name="province" lay-filter="province" class="province">
					<option value="">请选择市</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="city" lay-filter="city" disabled>
					<option value="">请选择市</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="area" lay-filter="area" disabled>
					<option value="">请选择县/区</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-block">
				<input type="text" value="" placeholder="请输入邮箱" lay-verify="email" class="layui-input userEmail">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">自我评价</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea myself"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/js/cacheUserInfo.js"></script>
<script type="text/javascript" >
	//判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像
	var form, $,areaData;
	layui.config({
		base : "/resources/js/"
	}).extend({
		"address" : "address"
	});
	layui.use(['form','layer','upload','laydate',"address"],function(){
		form = layui.form;
		$ = layui.jquery;
		var layer = parent.layer === undefined ? layui.layer : top.layer,
				upload = layui.upload,
				laydate = layui.laydate,
				address = layui.address;

		//文件上传
		$(".thumbImg").attr("src",'/file/showImageByPath?path=images/defaultgoodsimg.png');
		$("#goodsimg").val('images/defaultgoodsimg.png');
		upload.render({
			elem: '.userFaceBtn',
			url: '/file/uploadFile',
			acceptMime:'image/*',//设置允许上传所有的图片
			field:'mf',
			method : "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
			done: function(res, index, upload){
				var path='/file/showImageByPath?path='+res.path;
				$('.thumbImg').attr('src',path);
				$("#goodsimg").val(path);//给隐藏域赋值
				$('#userFace').attr('src',path);
			}
		});



		//添加验证规则
		form.verify({
			userBirthday : function(value){
				if(!/^(\d{4})[\u4e00-\u9fa5]|[-\/](\d{1}|0\d{1}|1[0-2])([\u4e00-\u9fa5]|[-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/.test(value)){
					return "出生日期格式不正确！";
				}
			}
		})
		//选择出生日期
		laydate.render({
			elem: '.userBirthday',
			format: 'yyyy年MM月dd日',
			trigger: 'click',
			max : 0,
			mark : {"0-12-15":"生日"},
			done: function(value, date){
				if(date.month === 12 && date.date === 15){ //点击每年12月15日，弹出提示语
					layer.msg('今天是马哥的生日，也是layuicms2.0的发布日，快来送上祝福吧！');
				}
			}
		});

		//获取省信息
		address.provinces();

		//提交个人资料
		form.on("submit(changeUser)",function(data){
			var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
			//将填写的用户信息存到session以便下次调取
			var key,userInfoHtml = '';
			userInfoHtml = {
				'realName' : $(".realName").val(),
				'sex' : data.field.sex,
				'userPhone' : $(".userPhone").val(),
				'userBirthday' : $(".userBirthday").val(),
				'province' : data.field.province,
				'city' : data.field.city,
				'area' : data.field.area,
				'userEmail' : $(".userEmail").val(),
				'myself' : $(".myself").val()
			};
			for(key in data.field){
				if(key.indexOf("like") != -1){
					userInfoHtml[key] = "on";
				}
			}
			window.sessionStorage.setItem("userInfo",JSON.stringify(userInfoHtml));
			setTimeout(function(){
				layer.close(index);
				layer.msg("提交成功！");
			},2000);
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		})


	});

</script>

</body>
</html>